<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from 'echarts'
import resize from '../../../components/Charts/mixins/resize'

export default {
  name: 'MixLineChart',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    // title: {
    //   type: String,
    //   default: '用例成功百分比'
    // },
    width: {
      type: String,
      default: '300%'
    },
    height: {
      type: String,
      default: '200%'
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      showSeries: [],
      showLegend: [],
      showData: []
    }
  },
  watch: {
    chartData(newV, oldV) {
      this.showLegend = []
      this.xData = []
      const _self = this
      this.chartData[0].counter.forEach(function(v) {
        _self.xData.push(v.date)
      })
      this.chartData.forEach(function(newV) {
        _self.showLegend.push(newV.name)
      })
      this.createSeries()
      this.initChart()
    }
  },
  created() {
    this.showLegend = []
    this.xData = []
    const _self = this
    if (this.chartData.length !== 0) {
      this.chartData[0].counter.forEach(function(v) {
        _self.xData.push(v.date)
      })
    }
    this.chartData.forEach(function(item) {
      _self.showLegend.push(item.name)
    })
    this.createSeries()
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  // :colors="['#40E0D0', '#FF0000', '#2F4F4F']
  methods: {
    createSeries() {
      this.showSeries = []
      const series = []
      this.chartData.forEach(function(item) {
        const vals = []
        item.counter.forEach(function(v) {
          vals.push(v.value)
        })
        series.push({
          name: item.name,
          type: item.type,
          stack: 'total',
          barMaxWidth: 35,
          barGap: '10%',
          itemStyle: {
            normal: {
              color: item.color,
              label: {
                show: true,
                // 数值标签
                textStyle: {
                  color: '#ffa510'
                },
                position: 'top',
                formatter(p) {
                  p.seriesIndex
                  return p.value > 0 ? p.value : ''
                }
              }
            }
          },
          data: vals
        })
      })
      this.showSeries = series
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      const _self = this
      this.chart.setOption({
        backgroundColor: '#FFFFFF',
        title: {
          text: _self.title,
          x: '20',
          top: '20',
          textStyle: {
            color: 'rgba(39,42,41,0.96)',
            fontSize: '22'
          }
        },
        tooltip: {
          trigger: 'item', // item 属性统计图无背景
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '10%',
          right: '5%',
          borderWidth: 0,
          top: 150,
          bottom: 100,
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          // 字段说明文字
          x: '5%',
          top: '14%',
          textStyle: {
            color: '#000000'
          },
          data: _self.showLegend
        },
        calculable: true,
        xAxis: [
          {
            // X轴
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#90979c'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            splitArea: {
              show: false
            },
            axisLabel: {
              interval: 0,
              rotate: 50
            },
            data: _self.xData
          }
        ],
        yAxis: [
          {
            // Y轴
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#90979c'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            splitArea: {
              show: false
            }
          }
        ],
        series: _self.showSeries
      })
    }
  }
}
</script>
